* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

html,body,#root,.container {
  height: 100%;
}
html {
  font-size: 26.66666666666vw;
}
body {
  font-size: 12px;
}
.container {
  display: flex;
  flex-direction: column;


  .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .header {
      height: 0.44rem;
      background-color: #f66;
      color: white;
      text-align: center;
      line-height: 0.44rem;
    }

    .content {
      flex: 1;
      overflow: auto;
    }
  }

  .footer {
    height: 0.5rem;
    background-color: #efefef;
    border-top: 1px solid #f66;
    display: flex;

    a {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      color: #333;

      // & 表示的是当前选择器，给具有 active class 的 a 标签添加下面的字体颜色
      &.active {
        color: #f66;
      }
    }

    // .active {
    //   color: #f66;
    // }

  }

}
